<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="./css/example.css"/>
    <script src="./libs/layui/layui.js"></script>
    <link rel="stylesheet" href="./libs/layui/css/layui.css"/>
    <style>
        /*注意!*/
        /*如果是嵌套在layer内, 需要覆盖掉layer弹层默认的overflow: auto;*/
        /*否则会出现滚动条,并且显示不全*/
        .layui-layer-page .layui-layer-content {
            overflow: visible;
        }
    </style>
    <title>iconSelected - 图标选择器</title>
</head>
<body>
<div class="board">
    <h1 class="title">效果展示</h1>
    <h3 style="text-align: center; margin-bottom: 30px;">示例2: 嵌套在普通弹层内使用</h3>
    <button id="show-layer" class="layui-btn layui-btn-fluid">打开弹层</button>
</div>

<script type="text/html" id="tpl">
    <div class="layui-form" style="padding: 15px;">
        <div class="layui-form-item">
            <div class="layui-form-label">选择图标</div>
            <div class="layui-input-block">
                <input type="text" name="icon" value="layui-icon layui-icon-username" placeholder="请选择" maxlength="16" autocomplete="off" class="layui-input" id="icon"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label">名称</div>
            <div class="layui-input-block">
                <input type="text" name="name" value="用户管理" autofocus maxlength="16" autofocus required lay-verify="required" autocomplete="off" class="layui-input" placeholder="名称"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label">排序号</div>
            <div class="layui-input-block">
                <input type="text" name="sort" value="10" placeholder="序号" class="layui-input" id="sort"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label">备注信息</div>
            <div class="layui-input-block">
                <textarea name="remark" rows="3" placeholder="可留空" class="layui-textarea" style="resize: none;"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="submit" value="保存" class="layui-btn" lay-submit/>
                <input type="reset" value="重新填写" class="layui-btn layui-btn-primary"/>
            </div>
        </div>
    </div>
</script>
<script>
    layui
        .config({
            base: "./libs/layui_exts/",
        })
        .extend({
            iconSelected: "iconSelected/js/index",
        });

    layui.use(["layer", "iconSelected", "form", "jquery"], function () {
        var iconSelected = layui.iconSelected;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.$;

        $("#show-layer").click(function () {
            layer.open({
                type: 1,
                title: "提交表单",
                btn: false,
                content: $("#tpl").text(),
                success: function () {
                    iconSelected.render("#icon", {
                        event: {
                            select(event, data) {
                                console.log("选中的图标数据", {event, data});
                            },
                        },
                    });

                    form.on("submit", function (data) {
                        layer.open({
                            title: "提交内容",
                            content: '<pre style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; font-family: Consolas;">' + JSON.stringify(data.field, null, 4) + "</pre>",
                        });
                        return false;
                    });
                }
            })
        })


    });
</script>
</body>
</html>
